<template>
  <div class="user-list-view">
    <!-- 新的朋友按钮 -->
    <div class="new-btn flex flex-cc click rel" @click="newVisible = true">
      <div class="flex-fs-0 mr-15">
        <BaseImage
          class="kang-avatar"
          src="@/kang/img/friend_avatar.png"
        ></BaseImage>
      </div>

      <div class="flex-1">
        <div class="fw-bold">好友请求</div>
        <div
          class="red-dot"
          style="top: 8px; left: 8px"
          v-show="sharedContactState.unreadFriendRequestCount > 0"
        >
          {{
            sharedContactState.unreadFriendRequestCount > 99
              ? '99'
              : sharedContactState.unreadFriendRequestCount
          }}
        </div>
      </div>
    </div>

    <!-- 新的朋友弹窗 -->
    <n-modal
      class="kang-modal"
      preset="dialog"
      title="好友请求"
      style="width: 400px"
      :close-on-esc="true"
      v-model:show="newVisible"
    >
      <NewFriendListView></NewFriendListView>
    </n-modal>

    <!-- 好友列表 -->
    <div>
      <n-divider style="margin: 0" class="mb-15" title-placement="center">
        <div class="fz-12 cl-second">{{ groupedContacts.length }}个联系人</div>
      </n-divider>

      <virtual-list
        :data-key="'uid'"
        :estimate-size="10000"
        :data-sources="groupedContacts"
        :data-component="contactItemView"
      ></virtual-list>
    </div>

    <!-- 右键菜单 -->
    <vue-context
      ref="menu"
      v-slot="{ data: userInfo }"
      v-on:close="onContactContextMenuClose"
    >
      <li>
        <a @click.prevent="sendMessage(userInfo)">
          {{ $t('message.send_message') }}
        </a>
      </li>
      <li>
        <a @click.prevent="sendUserCard(userInfo)">
          {{ $t('misc.share_to_friend') }}
        </a>
      </li>
    </vue-context>
  </div>
</template>
<script>
import store from '../../../store'
import NewFriendListView from '../../main/contact/FriendRequestListView'
import ContactItemView from './ContactItemView'
import Conversation from '../../../wfc/model/conversation'
import ConversationType from '../../../wfc/model/conversationType'
import ForwardType from '../conversation/message/forward/ForwardType'
import CardMessageContent from '../../../wfc/messages/cardMessageContent'
import wfc from '../../../wfc/client/wfc'
import Message from '../../../wfc/messages/message'
import { markRaw } from 'vue'

export default {
  name: 'UserListView',
  components: {
    NewFriendListView,
  },
  data() {
    return {
      sharedContactState: store.state.contact,
      contactItemView: markRaw(ContactItemView),
      newVisible: false,
    }
  },
  created() {
    this.$eventBus.$on('showContactContextMenu', ([event, userInfo]) => {
      this.showContactContextMenu(event, userInfo)
    })
  },
  unmounted() {
    this.$eventBus.$off('showContactContextMenu')
  },
  methods: {
    sendMessage(userInfo) {
      let conversation = new Conversation(
        ConversationType.Single,
        userInfo.uid,
        0
      )
      store.setCurrentConversation(conversation)
      this.$router.replace('/home')
    },
    sendUserCard(userInfo) {
      let userCardMessageContent = new CardMessageContent(
        0,
        userInfo.uid,
        userInfo.displayName,
        userInfo.portrait,
        wfc.getUserId()
      )
      userCardMessageContent.name = userInfo.name
      let message = new Message(null, userCardMessageContent)

      return this.$forwardMessage({
        forwardType: ForwardType.NORMAL,
        messages: [message],
      })
    },
    showContactContextMenu(event, userInfo) {
      if (!this.$refs.menu) {
        return
      }
      console.log('showContactContextMenu')
      this.sharedContactState.contextMenuUserInfo = userInfo
      this.$refs.menu.open(event, userInfo)
    },
    onContactContextMenuClose() {
      this.sharedContactState.contextMenuUserInfo = null
    },
  },
  computed: {
    groupedContacts() {
      let groupedUsers = []
      let currentCategory = {}
      let lastCategory = null
      this.users.forEach((user) => {
        if (!lastCategory || lastCategory !== user._category) {
          lastCategory = user._category
          currentCategory = {
            type: 'category',
            category: user._category,
            uid: user._category,
          }
          groupedUsers.push(currentCategory)
          groupedUsers.push(user)
        } else {
          groupedUsers.push(user)
        }
      })
      return groupedUsers
    },
    users() {
      return store.state.contact.favContactList.concat(
        store.state.contact.friendList
      )
    },
  },
}
</script>

<style lang="scss" scoped>
.new-btn {
  height: 68px;
  padding: 12px;
}
</style>
